<template lang="pug">
	.row
		.col-xs-4.col-sm-4
			input.form-control.input-sm(v-model="searchInput")
		.col-xs-4.col-sm-4
			.btn-group
				mixin button(name, text)
					button.btn-sm.btn.btn-default(
						v-bind:class=`{active: orderName==='${name}'}`
						@click=`order('${name}')`
					) 
						| #{text}
						span.glyphicon.glyphicon-sort-by-attributes(
							v-show=`orderName==='${name}'`
							v-bind:class=`
								orderdirection ?
									'glyphicon-sort-by-attributes' :
									'glyphicon-sort-by-attributes-alt'
							`
						)
				+button('progress', '按进度')
				+button('filename', '按文件名')
				+button('size', '按大小')
		.col-xs-4.col-sm-4
			p.pull-right
				i.fa.fa-download
				| &nbsp;
				| {{ fz(downloadSpeed) }}/S
		p &nbsp;
		.col-md-12
			p(v-show="activeList.length + pauseList.length + stopList.length === 0") 没有下载任务，立即
				a(v-link="{name: 'add'}") 添加
				| ？
			mixin group(list, text)
				.list-group(v-show=`${list}.length`)
					h5 #{text}
					hr
					item(
						v-for=`d in ${list}`
						v-bind:d="d"
						track-by="gid"
					)
			+group("activeList", '下载')
			+group("pauseList", '暂停／错误')
			+group("stopList", '结束')
</template>
<script>
	
	const _ = require('lodash')
	
	const stateFilter = (v, statusL) => v.filter(
		x => statusL.includes(x.status)
	)


	const component = {
		mixins: [
			require('mixin/rpc'),
			require('mixin/filesize'),
		],
		data () {
			return {
				orderName     : 'progress',
				orderdirection: true,
				searchInput   : '',
			}
		},
		components: {
			item: require('components/item'),
		},
		methods: {
			order (by) {
				if (by === this.orderName) {
					this.orderdirection = !this.orderdirection
				}

				this.orderName = by
			},
		},
		ready () {
			const { id } = this.$route.query

			const cb = () => {
				const f = _.throttle(this.getList, 1000)
	
				f.flush()

				this.$on('frame', f)
			}

			if (id) {
				this.getConnection(id).then(cb)
			} else {
				cb()
			}
		},
		detached () {
			this.$off()
		},
	}

	{
		const methods = {
			progress: x => x.restTime,
			filename: x => x.files[0].path,
			size    : x => x.totalLength,
		}
	
		component.computed = {
			searchKeys () {
				return this.searchInput
					.split(' ')
					.filter(v => v)
					.map(x => x.toLocaleLowerCase())
			},
			_list () {
				/*eslint no-magic-numbers: ["off", {"ignore": [-1, 0, 1]}] */

				let l = this.$store.state.list.data

				if (this.searchKeys.length !== 0) {
					l = l.filter(
						d => d.files.some(
							f => this.searchKeys.some(
								s => f.path.toLocaleLowerCase().includes(s)
							)
						)
					)
				}

				l = l.sort((a, b) => {
					const fn = methods[this.orderName]

					return fn(a) < fn(b) ? -1 : 1
				})

				return this.orderdirection ? l : l.reverse()
			},
			activeList () {
				return stateFilter(this._list, ['active', 'waiting'])
			},
			pauseList () {
				return stateFilter(this._list, ['paused', 'error'])
			},
			stopList () {
				return stateFilter(this._list, ['removed', 'complete'])
			},
			downloadSpeed () {
				return this.$store.state.downloadSpeed
			},
		}
	}
	
	module.exports = component
</script>